{% extends "score/base.html" %}
{% load static %}
{% load score_filters %}

{% block title %}成绩列表 - ExamPulse{% endblock %}

<!-- 引入外部CSS -->
{% block extra_css %}
<link rel="stylesheet" href="{% static 'score/css/score_list.css' %}">
{% endblock %}

{% block score_content %}
<div class="row">
    <div class="col-md-12">
        <h2 class="mb-4">
            <i class="fas fa-list-alt me-2"></i>成绩列表
            <a href="{% url 'score:score_add' %}" class="btn btn-primary btn-sm ms-3">
                <i class="fas fa-plus me-1"></i>添加成绩
            </a>
            <a href="{% url 'score:score_add_multiple' %}" class="btn btn-success btn-sm ms-2">
                <i class="fas fa-plus-square me-1"></i>批量添加
            </a>
            <!-- 导出按钮组 -->
            <div class="btn-group ms-3">
                <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-download me-1"></i>导出数据
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" href="javascript:exportScoreData('excel')">
                            <i class="fas fa-file-excel me-1"></i>Excel格式
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="javascript:exportScoreData('csv')">
                            <i class="fas fa-file-csv me-1"></i>CSV格式
                        </a>
                    </li>
                </ul>
            </div>
        </h2>
    </div>
</div>

<!-- 总记录数统计卡片 -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body text-center">
                <h5 class="card-title">总记录数</h5>
                <h3 class="text-primary">{{ total_records }}</h3>
                <small class="text-muted">所有科目成绩总数</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body text-center">
                <h5 class="card-title">整体平均分</h5>
                <h3 class="text-info">{{ avg_score }}</h3>
                <small class="text-muted">所有科目平均</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body text-center">
                <h5 class="card-title">最高分</h5>
                <h3 class="text-success">{{ max_score }}</h3>
                <small class="text-muted">所有科目最高</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body text-center">
                <h5 class="card-title">最低分</h5>
                <h3 class="text-danger">{{ min_score }}</h3>
                <small class="text-muted">所有科目最低</small>
            </div>
        </div>
    </div>
</div>

<!-- 科目统计卡片 -->
{% if subject_stats %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">
                    <i class="fas fa-chart-pie me-2 text-primary"></i>我的考试科目统计
                    <span class="badge bg-primary ms-2">{{ subject_stats|length }} 个科目</span>
                </h5>
                <small class="text-muted">基于您的考试科目配置</small>
            </div>
            <div class="card-body">
                <div class="row">
                    {% for stat in subject_stats %}
                    <!-- 修复布局问题：将 col-xl-4 改为 col-xl-3，确保4个科目在一行 -->
                    <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
                        <div class="card subject-stat-card h-100
                            {% if not stat.has_records %}empty-subject-card{% endif %}"
                            style="border-left: 4px solid {{ stat.color }};">
                            <div class="card-body">
                                <!-- 科目标题区域 -->
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div>
                                        <h6 class="card-title mb-1">
                                            <span class="badge subject-badge" style="background-color: {{ stat.color }}; color: white;">
                                                <i class="fas
                                                    {% if not stat.has_records %}fa-plus-circle
                                                    {% else %}fa-book
                                                    {% endif %} me-1"></i>
                                                {{ stat.subject.name }}
                                            </span>
                                        </h6>
                                        <small class="text-muted">满分: {{ stat.full_score }}分</small>
                                    </div>
                                    <span class="badge
                                        {% if not stat.has_records %}bg-light text-muted
                                        {% else %}bg-light text-dark{% endif %}">
                                        <i class="fas
                                            {% if not stat.has_records %}fa-clock
                                            {% else %}fa-chart-line
                                            {% endif %} me-1"></i>
                                        {% if not stat.has_records %}待录入
                                        {% else %}{{ stat.record_count }}次{% endif %}
                                    </span>
                                </div>

                                {% if stat.has_records %}
                                <!-- 有成绩的科目：显示统计数据 -->
                                <div class="row text-center g-2 mt-3">
                                    <div class="col-4">
                                        <div class="stat-item p-2 rounded">
                                            <div class="stat-value text-primary fw-bold">{{ stat.avg_score }}</div>
                                            <div class="stat-label small text-muted">平均分</div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="stat-item p-2 rounded">
                                            <div class="stat-value text-success fw-bold">{{ stat.max_score }}</div>
                                            <div class="stat-label small text-muted">最高分</div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="stat-item p-2 rounded">
                                            <div class="stat-value text-danger fw-bold">{{ stat.min_score }}</div>
                                            <div class="stat-label small text-muted">最低分</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 掌握程度进度条 -->
                                <div class="mt-4">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="small text-muted">掌握程度</span>
                                        <span class="badge bg-{{ stat.mastery_color }} mastery-badge">
                                            <i class="fas
                                                {% if stat.mastery_color == 'success' %}fa-check-circle
                                                {% elif stat.mastery_color == 'info' %}fa-chart-line
                                                {% elif stat.mastery_color == 'warning' %}fa-exclamation-circle
                                                {% else %}fa-exclamation-triangle
                                                {% endif %} me-1"></i>
                                            {{ stat.mastery_level }}
                                        </span>
                                    </div>
                                    <div class="progress mastery-progress" style="height: 10px;">
                                        <div class="progress-bar bg-{{ stat.mastery_color }}"
                                             role="progressbar"
                                             style="width: {{ stat.mastery_rate }}%;"
                                             aria-valuenow="{{ stat.mastery_rate }}"
                                             aria-valuemin="0"
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-1">
                                        <small class="text-muted">0%</small>
                                        <small class="text-{{ stat.mastery_color }} fw-bold">{{ stat.mastery_rate }}%</small>
                                        <small class="text-muted">100%</small>
                                    </div>
                                </div>

                                {% else %}
                                <!-- 无成绩的科目：显示添加按钮 -->
                                <div class="text-center py-4 empty-subject-content">
                                    <i class="fas fa-plus-circle fa-3x text-muted mb-3"></i>
                                    <p class="text-muted mb-3">暂无成绩记录</p>
                                    <a href="{% url 'score:score_add' %}?subject={{ stat.subject.id }}"
                                       class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-plus me-1"></i>添加{{ stat.subject.name }}成绩
                                    </a>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- 筛选表单 -->
<div class="card filter-card mb-4">
    <div class="card-body">
        <h5 class="card-title"><i class="fas fa-filter me-2"></i>筛选条件</h5>
        <form method="get" class="row g-3" id="filterForm">
            <div class="col-md-3">
                <label for="subject" class="form-label">科目</label>
                <select class="form-select" id="subject" name="subject">
                    <option value="all">所有科目</option>
                    {% for subject in subjects %}
                    <option value="{{ subject.id }}" {% if current_filters.subject == subject.id|stringformat:"s" %}selected{% endif %}>
                        {{ subject.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3">
                <label for="exam" class="form-label">考试</label>
                <select class="form-select" id="exam" name="exam">
                    <option value="all">所有考试</option>
                    {% for exam in exams %}
                    <option value="{{ exam.id }}" {% if current_filters.exam == exam.id|stringformat:"s" %}selected{% endif %}>
                        {{ exam.name }} ({{ exam.exam_date }})
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label for="date_from" class="form-label">开始日期</label>
                <input type="date" class="form-control" id="date_from" name="date_from" value="{{ current_filters.date_from|default:'' }}">
            </div>
            <div class="col-md-2">
                <label for="date_to" class="form-label">结束日期</label>
                <input type="date" class="form-control" id="date_to" name="date_to" value="{{ current_filters.date_to|default:'' }}">
            </div>
            <div class="col-md-2">
                <label for="sort_by" class="form-label">排序方式</label>
                <select class="form-select" id="sort_by" name="sort_by">
                    <option value="-exam__exam_date" {% if current_filters.sort_by == "-exam__exam_date" %}selected{% endif %}>考试日期(新到旧)</option>
                    <option value="exam__exam_date" {% if current_filters.sort_by == "exam__exam_date" %}selected{% endif %}>考试日期(旧到新)</option>
                    <option value="-score" {% if current_filters.sort_by == "-score" %}selected{% endif %}>分数(高到低)</option>
                    <option value="score" {% if current_filters.sort_by == "score" %}selected{% endif %}>分数(低到高)</option>
                    <option value="subject__name" {% if current_filters.sort_by == "subject__name" %}selected{% endif %}>科目(A-Z)</option>
                    <option value="-subject__name" {% if current_filters.sort_by == "-subject__name" %}selected{% endif %}>科目(Z-A)</option>
                </select>
            </div>
            <div class="col-12">
                <button type="submit" class="btn btn-primary me-2">
                    <i class="fas fa-search me-1"></i>应用筛选
                </button>
                <a href="{% url 'score:score_list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-times me-1"></i>清除筛选
                </a>
            </div>
        </form>
    </div>
</div>

<!-- 导出数据模态框 -->
<div class="modal fade" id="exportModal" tabindex="-1" aria-labelledby="exportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exportModalLabel"><i class="fas fa-download me-1"></i>导出数据</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <!-- 加载中状态 -->
                    <div id="exportLoading" class="mb-3">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <p class="mt-2">正在生成文件，请稍候...</p>
                    </div>
                    <!-- 成功状态（默认隐藏） -->
                    <div id="exportSuccess" class="mb-3 d-none">
                        <i class="fas fa-check-circle text-success" style="font-size: 24px;"></i>
                        <p class="mt-2 text-success">文件生成成功！</p>
                    </div>
                    <!-- 失败状态（默认隐藏） -->
                    <div id="exportError" class="mb-3 d-none">
                        <i class="fas fa-exclamation-circle text-danger" style="font-size: 24px;"></i>
                        <p class="mt-2 text-danger" id="exportErrorMsg">文件生成失败，请重试！</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="exportFooter">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="exportCloseBtn" disabled>关闭</button>
                <a href="" id="exportDownloadBtn" class="btn btn-primary d-none">立即下载</a>
            </div>
        </div>
    </div>
</div>

<!-- 成绩表格 -->
<div class="card">
    <div class="card-body">
        {% if records_page %}
        <div class="table-responsive">
            <table class="table table-hover table-striped">
                <thead class="table-dark">
                    <tr>
                        <th>考试名称</th>
                        <th>考试日期</th>
                        <th>科目</th>
                        <th>得分</th>
                        <th>满分</th>
                        <th>失分</th>
                        <th>掌握程度</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in records_page %}
                    <tr class="{% if record.score >= record.subject.full_score|multiply:0.8 %}score-high
                              {% elif record.score >= record.subject.full_score|multiply:0.6 %}score-medium
                              {% else %}score-low{% endif %}">
                        <td>{{ record.exam.name }}</td>
                        <td>{{ record.exam.exam_date }}</td>
                        <td>
                            <span class="badge" style="background-color: {{ record.subject.color }}; color: white;">
                                {{ record.subject.name }}
                            </span>
                        </td>
                        <td><strong>{{ record.score }}</strong></td>
                        <td>{{ record.subject.full_score }}</td>
                        <td class="text-danger">{{ record.loss_points }}</td>
                        <td>
                            {% widthratio record.score record.subject.full_score 100 as percentage %}
                            <div class="progress" style="height: 20px; width: 100px;">
                                <div class="progress-bar
                                    {% if percentage >= 80 %}bg-success
                                    {% elif percentage >= 60 %}bg-warning
                                    {% else %}bg-danger{% endif %}"
                                    role="progressbar"
                                    style="width: {{ percentage }}%;"
                                    aria-valuenow="{{ percentage }}"
                                    aria-valuemin="0"
                                    aria-valuemax="100">
                                    {{ percentage }}%
                                </div>
                            </div>
                        </td>
                        <td class="btn-action-group">
                            <!-- 查看详情按钮 - 直接跳转到详情页 -->
                            <a href="{% url 'score:score_detail' record.id %}" class="btn btn-sm btn-info" title="查看详情">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{% url 'score:score_edit' record.id %}" class="btn btn-sm btn-primary" title="编辑">
                                <i class="fas fa-edit"></i>
                            </a>
                            <!-- 删除按钮改为表单提交 -->
                            <form method="post" action="{% url 'score:score_delete' record.id %}" class="d-inline delete-form">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm btn-danger delete-btn" title="删除" onclick="return confirm('确定要删除这条成绩记录吗？此操作不可恢复。')">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 分页控件 -->
        {% if records_page.has_other_pages %}
        <nav aria-label="Page navigation" class="pagination-container">
            <ul class="pagination justify-content-center">
                {% if records_page.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                        &laquo; 第一页
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ records_page.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                        上一页
                    </a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <span class="page-link">&laquo; 第一页</span>
                </li>
                <li class="page-item disabled">
                    <span class="page-link">上一页</span>
                </li>
                {% endif %}

                {% for i in records_page.paginator.page_range %}
                    {% if records_page.number == i %}
                    <li class="page-item active"><span class="page-link">{{ i }}</span></li>
                    {% elif i > records_page.number|add:'-3' and i < records_page.number|add:'3' %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ i }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                            {{ i }}
                        </a>
                    </li>
                    {% endif %}
                {% endfor %}

                {% if records_page.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ records_page.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                        下一页
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ records_page.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                        最后一页 &raquo;
                    </a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <span class="page-link">下一页</span>
                </li>
                <li class="page-item disabled">
                    <span class="page-link">最后一页 &raquo;</span>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}

        {% else %}
        <div class="alert alert-info text-center no-record-alert">
            <i class="fas fa-info-circle me-2"></i>暂无成绩记录
            <div class="mt-3">
                <a href="{% url 'score:score_add' %}" class="btn btn-primary me-2">
                    <i class="fas fa-plus me-1"></i>添加单条成绩
                </a>
                <a href="{% url 'score:score_add_multiple' %}" class="btn btn-success">
                    <i class="fas fa-plus-square me-1"></i>批量添加成绩
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}

<!-- 引入外部JS -->
{% block extra_js %}
<script src="{% static 'score/js/score_list.js' %}"></script>
{% endblock %}